<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./common.js"></script>
    <script src="./sport.js"></script>
</head>

<body>
    <div class="banner">
        <ul class="imgBox clearFix">

            <li style="background-color: red">1</li>
            <li style="background-color: orange">2</li>
            <li style="background-color: green">3</li>
            <li style="background-color: pink">4</li>
            <li style="background-color: yellow">5</li>

        </ul>

        <ol class="pointBox"></ol>

        <div class="leftRightTabs">
            <a href="javascript:;" class="left">
                < </a>
                    <a href="javascript:;" class="right"> > </a>
        </div>
    </div>
</body>

</html>

<script>

    
    // 1、创建常量保存dom对象
    const bannerDom = document.querySelector(".banner");
    const imgBoxDom = document.querySelector(".imgBox");
    const pointBoxDom = document.querySelector(".pointBox");
    const leftRightTabsDom = document.querySelector(".leftRightTabs");
    // 获取banner宽度
    const bannerWidth = bannerDom.clientWidth;

    // index是图片的序号 现在是有7张图
    let index = 1;
    // 保存定时器标识
    let timer;
    //true表示动画为执行完毕，false执行结束
    let flag = false;
    // 2、调用函数创建圆点
    createPoint();
    // 3、调用函数创建li标签
    createLiTag();
    // 4、调用函数自动切换图片
    autoPlay();
    // 5、划入划出事件
    bannerDom.addEventListener("mouseover",function(){
        clearInterval(timer);
    })

    bannerDom.addEventListener("mouseout",function(){
        autoPlay();
    })

    // 6、箭头点击事件
    leftRightTabsDom.addEventListener("click",function(event){
        if(flag){
            // 表示动画还未执行完毕
            console.log("表示动画还未执行完毕")
            return; 

        }
        // 如果代码走到这一行说明 说明flag为false 表示目前没有动画在执行,后续会执行动画 所以修改标识 表示在执行过程中
        flag = true                    
        if(event.target.className == "left"){
            //上一张
            // console.log("left")
            index --;
            animate(imgBoxDom,{left:-index*bannerWidth},playEnd)
            // playEnd();
        }else if (event.target.className == "right"){
           //下一张
            index ++;
            // console.log("right")
            animate(imgBoxDom,{left:-index*bannerWidth},playEnd)
            // playEnd();

        }
    })

    // 7、实现小圆点点击
    pointBoxDom.addEventListener("click", function(event){
        if(event.target.nodeName == "LI"){
            //点击的是小圆点并获取当前小圆点的序号
            index = event.target.getAttribute("data-index")-0+1;
            animate(imgBoxDom,{left:-index*bannerWidth},playEnd)
        }
    })


    function createLiTag() {
        // 将第一个li标签进行复制
        let firstLiClone = imgBoxDom.firstElementChild.cloneNode(true);

        // 将最后一个li标签复制
        let lastLiClone = imgBoxDom.lastElementChild.cloneNode(true);
        // 将赋值的第一个li加入到最后位置
        imgBoxDom.appendChild(firstLiClone);
        // 将复制的最后一个li加入到开始位置
        imgBoxDom.insertBefore(lastLiClone, imgBoxDom.firstElementChild);    //第一个参数加入的，第二个是加入的位置
        // 修正imgBox的宽度
        imgBoxDom.style.width = bannerWidth * imgBoxDom.children.length + "px";
        // 设置默认显示  真实的第一张图片
        imgBoxDom.style.left = -bannerWidth + "px";
    }

    // 创建小圆点
    function createPoint() {
        // 根据ul标签中li的个数创建小圆点
        for (let i = 0; i < imgBoxDom.children.length; i++) {
            let liDom = document.createElement("li");
            i == 0 && (liDom.className = "active");
            // 增加记录序号
            liDom.setAttribute("data-index", i);
            pointBoxDom.appendChild(liDom);
        }
    }

    //自动轮播
    function autoPlay(){
        timer = setInterval(() =>{
            index ++;
            animate(imgBoxDom,{left:-index*bannerWidth},playEnd)
        },3000)
    }

    function playEnd(){
        //修正index的值 ，当下到最后一张图片时，重新回到第一张（实际是第二张）
        if (index >=imgBoxDom.children.length-1){
            index = 1;
            // console.log("下")
        }
        //上到第一张，修正回到倒数第二张
        if(index <=0){
            index = imgBoxDom.children.length -2;
            // console.log("上")
        }
        imgBoxDom.style.left = -index*bannerWidth + "px";

        //处理小圆点跟随
        for (let i = 0 ;i<pointBoxDom.children.length; i++){
           
            pointBoxDom.children[i].className = ""
        }
        //当前显示的图片对应的小圆点样式,因为index的初始值为1
        pointBoxDom.children[index-1].className = "active";
        flag = false;
    }
</script>